@use "../../default" as theme;
.pf-Radio{
	flex-shrink:0;
	font-size: theme.$Radio-icon-size;
	color: theme.$Radio-primary-color;
	display:inline-flex;
	align-items:center;
	cursor:pointer;
	user-select:none;
	vertical-align: theme.$vertical-align;
	&:focus{
		outline:0;
	}
	&.pf--inactive{
		&:not(:hover):not(:focus){
			color: theme.$Radio-box-border-color !important;
		}
		.pf-Radio_dot{
			opacity:0;
			transform:scale3d(0,0,1);
		}
	}
	&.pf--disabled{
		color: theme.$Radio-box-border-color !important;
		cursor:not-allowed;
		.pf-Radio_icon{
			background: theme.$Radio-box-disabled-color;
		}
	}
}
.pf-Radio_icon{
	flex-shrink:0;
	width:1em;
	height:1em;
	fill:currentColor;
	background:#fff;
	border-radius:50%;
}
.pf-Radio_dot{
	opacity:1;
	transform-origin:50% 50%;
	transform:scale3d(1,1,1);
	transition: theme.$Radio-transition;
	transition-property:transform;
}
.pf-Radio_label{
	flex-shrink:0;
	margin-left: theme.$Radio-gap;
	color: theme.$Radio-color;
	font-size: theme.$Radio-content-size;
}